// CustomEchart.vue
<template>
	<view class="echart-main">
		<uni-ec-canvas id="mychartDom" canvas-id="mychart-bar" :ec="ec" ref="canvas" canvasHeight="170"
			class="canvas_size"></uni-ec-canvas>
	</view>
</template>

<script>
	import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
	import * as echarts from '@/components/uni-ec-canvas/echarts.js'
	let chart = null;
	export default {
		components: {
			uniEcCanvas
		},
		props: {
			value: {
				type: Number,
				default: 0
			},
		},
		mounted() {
			this.$refs.canvas.init(this.initChart)
		},
		methods: {
			initChart(canvas, width, height, canvasDpr) {
				chart = echarts.init(canvas, null, {
					width: width,
					height: height,
					devicePixelRatio: canvasDpr
				})
				canvas.setChart(chart)
				let datas = [
					[{
							name: '洗车',
							value: 500
						},
						{
							name: '保养',
							value: 1566.56
						}
					]
				]
				let option = {

					legend: {
						type: 'scroll',
						orient: 'vertical',
						right: 10,
						top: 20,
						bottom: 20,
						itemGap:16,
						itemWidth:14,
						itemHeight:6
					},
					series: datas.map(function(data, idx) {
						var top = idx * 33.3; 
						return {
							color:[
								"#FD7AA4","#947FFF"
							],
							type: 'pie',
							radius: [25, 50],
							top: "50%",
							height: '10%',
							left: 'left',
							width: 200,
							itemStyle: {
								borderColor: '#fff',
								borderWidth: 1
							},
							label: { //标注
								alignTo: 'edge',
								formatter: '{name|{b}}\n{time|{c}元}',
								minMargin: 50,
								edgeDistance: 10,
								lineHeight: 15,
								rich: {
									time: {
										fontSize: 12,
										color: '#000'
									}
								}
							},
							labelLine: {
								length: 35,
								length2: 202,
								maxSurfaceAngle: 80
							},
							labelLayout: function(params) {
								const isLeft = params.labelRect.x < myChart.getWidth() / 2;
								const points = params.labelLinePoints;
								// Update the end point.
								points[2][0] = isLeft ?
									params.labelRect.x :
									params.labelRect.x + params.labelRect.width;
								return {
									labelLinePoints: points,
									draggable: true,
									align: "center"
								};
							},
							data: data
						};
					})
				}
				chart.setOption(option)
				return chart
			}
		},
	}
</script>

<style land="scss" scoped>
	.echart-main {
		width: 50%;
		display: inline-block;
	}
</style>